<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>matrix</title>
		<!--本demo有3+个知识点-->
		<style>
			.aaa{
				height: 2000px;
			}
			#box{
				width: 217px;
				height: 217px;
				position: relative;
			}
			/*为什么清除浮动会失效?答案见下*/
			#box:after{
				display: block;
				content: "";
				clear: both;
				visibility: hidden;
				height: 0;
				line-height: 0;
			}
			
			
			#box img{
				width: 217px;
				height: 217px;
				position: absolute;
				transition: all 1s ease-in-out;
				display: block;
			}
			.front{
				transform: scale(1,1);
				opacity: 1;
			}
			.back{
				transform: scale(0,0);
				opacity: 0;
			}
			#box:hover .front{
				opacity: 0;
				transform: scale(0,0);
				transform-origin: left bottom;/*这里的奥秘：要想让图片有跳动出现效果，就在hover之后改变origin，因为这里从默认重心转移到我们规定的，也是经过transition的！！！*/
			}
			#box:hover .back{
				opacity: 1;
				transform: scale(1,1);
				transform-origin: right top;
			}
			
			
			
			#box2{
				width: 400px;
				position: relative;
			}
			#box2 img{
				/*position: absolute;*//*问题在这里，为什么只能清除浮动，不能清除定位*/
				float: left;
			}
			#box2:after{
				content: "";
				display: block;
				clear: both;
			}
			
			
			
			/*vertical-align:是把元素放置在父元素的某个标准线上（不是设置父元素改变子元素）,并且只生效于inline和inline-block,block元素没用*/
			#box3{
				height: 260px;
				background-color: pink;
				vertical-align: text-top;/*这里是没意义的(block)，也不能控制子元素*/
			}
			#box3 p{
				vertical-align: bottom;
				height: 60px;
			}
			#box3 img{
				vertical-align: super;
			} 
			
			
			
			
			#box4{
				width: 200px;
				height: 200px;
				background-color: #A0B3D6;
				transition: all 1s;
				background-color: "";/*这样无效，只有js中设置 空字符串 才能*/
				width: "";/*这样无效，只有js中设置 空字符串 才能*/
			}
			#box4:hover{
				/*transform: matrix(0,0,0,0,30,30);*/
				/*transform: translate(30px,30px) rotate(90deg);*/
			}
		</style>
	</head>
	<body>
		<div class="aaa">
			<div id="box">
				<img src="img/002.jpg" class="front"/>
				<img src="img/003.jpg" class="back"/>
			</div>
			<!--<div id="box2">
				<img src="img/001.jpg"/ width="329">
			</div>-->
			
			<div id="box3">
				
				<p>非常济公活佛</p>
				大概好久<img src="img/001.jpg" width="100"/>
			</div>
			<br /><br /><br />
			<div id="box4">
				
			</div>
		</div>
		
		
		<script>
			(function(){
				var $ = function(selector){
					return document.querySelector(selector);
				};
				
				$("#box4").onclick = function(){
					if(this.style.transform){
						this.style.transform = "";
//						this.style.transform = " ";//注意： "" 和  " "是不一样的，空字符串 和 空格字符串 不一样
						console.log(this.style.transform);//不能设置成空格，浏览器css部分会显示 invalid property value,无效属性值
						return false;
					}
					this.style.transform = "matrix(1,3,1,1,30,30)";
					console.log(this.style.backgroundColor);//js直接取到的是行内样式,内联和嵌入要获取得用别的api
				}
			})()
		</script>
	</body>
</html>
